<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米商城</title>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" type="text/css" href="css/fonts.css" />
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
  </head>
  <body>
    <!--顶部栏-->
    <div class="topBar">
      <div class="container">
        <div class="topBar_list">
          <a href="#">小米商城</a>
          <span>|</span>
          <a href="#">MIUI</a>
          <span>|</span>
          <a href="#">loT</a>
          <span>|</span>
          <a href="#">云服务</a>
          <span>|</span>
          <a href="#">金融</a>
          <span>|</span>
          <a href="#">有品</a>
          <span>|</span>
          <a href="#">小爱开放平台</a>
          <span>|</span>
          <a href="#">政企服务</a>
          <span>|</span>
          <a href="#">资质证照</a>
          <span>|</span>
        </div>

        <div class="shop">
          <a href="#">
            <i class="iconfont" style="font-size: 14px">&#xe600;</i>
            购物车(0)</a
          >
        </div>

        <div class="login">
          <a href="#">登录</a>
          <span>|</span>
          <a href="#">注册</a>
          <span>|</span>
          <a href="#">消息通知</a>
        </div>
      </div>
    </div>

    <!--导航栏-->
    <div class="header">
      <div class="container">
        <div class="site-logo">
          <a href="#">
            <img src="images/logo.png" />
          </a>
        </div>

        <div class="site-list">
          <ul class="clearfix">
            <li class="site-category">
              <a href="">
                <img src="images/mifen.gif" />
              </a>
              <!--侧边栏-->
              <div class="category-list">
                <ul>
                  <li>
                    <a href="#">
                      手机 电话卡
                      <span class="iconfont">&#xe686;</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      电视 盒子
                      <span class="iconfont">&#xe686;</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      笔记本 平板
                      <span class="iconfont">&#xe686;</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      家电 插线板
                      <span class="iconfont">&#xe686;</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      出行 穿戴
                      <span class="iconfont">&#xe686;</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      智能 路由器
                      <span class="iconfont">&#xe686;</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      电源 配件
                      <span class="iconfont">&#xe686;</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      健康 儿童
                      <span class="iconfont">&#xe686;</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      耳机 音箱
                      <span class="iconfont">&#xe686;</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      生活 箱包
                      <span class="iconfont">&#xe686;</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>
            <li>
              <a href="#">小米手机</a>
            </li>
            <li>
              <a href="#">红米</a>
            </li>
            <li>
              <a href="#">电视</a>
            </li>
            <li>
              <a href="#">笔记本</a>
            </li>
            <li>
              <a href="#">家电</a>
            </li>
            <li>
              <a href="#">新品</a>
            </li>
            <li>
              <a href="#">路由器</a>
            </li>
            <li>
              <a href="#">智能硬件</a>
            </li>
            <li>
              <a href="#">服务中心</a>
            </li>
            <li>
              <a href="#">社区</a>
            </li>
          </ul>
        </div>
        <div class="site-search">
          <form action="">
            <input type="text" name="shop" class="search-text" />
            <input
              type="submit"
              class="search-btn iconfont"
              value="&#xe612;"
              style="font-size: 24px"
            />
            <div class="search_word">
              <a href="#">小米9</a>
              <a href="#">小米9 SE</a>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!--主页内容-->
    <div class="site-content">
      <div class="container">
        <!--轮播图-->
        <div class="site-slider">
          <a href="#">
            <img src="images/yuan.jpg" />
          </a>
          <span class="next"></span>
          <span class="prev"></span>
          <div class="slider-item">
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
          </div>
        </div>
        <!--向导-->
        <div class="content-sub">
          <!--向导左边-->
          <div class="content-channel">
            <ul class="channel-list clearfix">
              <li>
                <a href="#">
                  <i class="iconfont">&#xe607;</i>
                  选购手机
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="iconfont">&#xe614;</i>
                  企业团购
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="iconfont">&#xe601;</i>
                  F玛通道
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="iconfont">&#xe60e;</i>
                  米粉卡
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="iconfont">&#xe606;</i>
                  以旧换新
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="iconfont">&#xe604;</i>
                  话费充值
                </a>
              </li>
            </ul>
          </div>
          <!--向导右边-->
          <div class="content-list clearfix">
            <ul>
              <li>
                <a href="">
                  <img src="images/image1.jpg" />
                </a>
              </li>
            </ul>
            <ul>
              <li>
                <a href="">
                  <img src="images/image2.jpg" />
                </a>
              </li>
            </ul>
            <ul>
              <li>
                <a href="">
                  <img src="images/image3.jpg" />
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="content-banner">
        <div class="container">
          <a href="#">
            <img src="images/banner.jpg" />
          </a>
        </div>
      </div>
    </div>

    <!--内容详情-->
    <div class="content-desc">
      <div class="container">
        <!--标题-->
        <div class="box-hd">
          <h2>手机</h2>
          <div class="more">
            <a href="#">
              查看全部
              <i class="iconfont">&#xe686;</i>
            </a>
          </div>
        </div>
        <!--内容-->
        <div class="box-bd">
          <div class="row clearfix">
            <!--内容左边-->
            <div class="row-l">
              <a href="#">
                <img src="images/iphone.jpg" />
              </a>
            </div>
            <!--内容右边-->
            <div class="row-r">
              <ul>
                <li>
                  <!--图像-->
                  <div class="figure">
                    <a href="#">
                      <img src="images/figure1.jpg" />
                    </a>
                  </div>
                  <!--标题-->
                  <h3 class="title">
                    <a href="#"> 小米9 6GB+128GB </a>
                  </h3>
                  <p class="desc">骁龙855，索尼4800万超广角微距三摄</p>
                  <p class="price"><span class="num">2999</span>元</p>
                  <div class="flag flag-new">新品</div>
                </li>

                <li>
                  <!--图像-->
                  <div class="figure">
                    <a href="#">
                      <img src="images/figure2.jpg" />
                    </a>
                  </div>
                  <!--标题-->
                  <h3 class="title">
                    <a href="#"> 小米9 SE 6GB+64GB </a>
                  </h3>
                  <p class="desc">索尼4800万超广角三摄，骁龙712</p>
                  <p class="price"><span class="num">1999</span>元</p>
                  <div class="flag flag-new">新品</div>
                </li>
                <li>
                  <!--图像-->
                  <div class="figure">
                    <a href="#">
                      <img src="images/figure3.jpg" />
                    </a>
                  </div>
                  <!--标题-->
                  <h3 class="title">
                    <a href="#"> 小米9 6GB+128GB </a>
                  </h3>
                  <p class="desc">骁龙855，索尼4800万超广角微距三摄</p>
                  <p class="price"><span class="num">999</span>元</p>
                  <div class="flag flag-new">新品</div>
                </li>
                <li>
                  <!--图像-->
                  <div class="figure">
                    <a href="#">
                      <img src="images/figure4.png" />
                    </a>
                  </div>
                  <!--标题-->
                  <h3 class="title">
                    <a href="#"> 小米9 6GB+128GB </a>
                  </h3>
                  <p class="desc">骁龙855，索尼4800万超广角微距三摄</p>
                  <p class="price"><span class="num">1099</span>元</p>
                  <div class="flag flag-new">新品</div>
                </li>
                <li>
                  <!--图像-->
                  <div class="figure">
                    <a href="#">
                      <img src="images/figure5.jpg" />
                    </a>
                  </div>
                  <!--标题-->
                  <h3 class="title">
                    <a href="#"> 小米9 6GB+128GB </a>
                  </h3>
                  <p class="desc">骁龙855，索尼4800万超广角微距三摄</p>
                  <p class="price"><span class="num">1499</span>元</p>
                  <div class="flag flag-new">减200元</div>
                </li>

                <li>
                  <!--图像-->
                  <div class="figure">
                    <a href="#">
                      <img src="images/figure6.jpg" />
                    </a>
                  </div>
                  <!--标题-->
                  <h3 class="title">
                    <a href="#"> 小米9 6GB+128GB </a>
                  </h3>
                  <p class="desc">骁龙855，索尼4800万超广角微距三摄</p>
                  <p class="price"><span class="num">1599</span>元</p>
                  <div class="flag flag-new">享8折</div>
                </li>

                <li>
                  <!--图像-->
                  <div class="figure">
                    <a href="#">
                      <img src="images/figure7.jpg" />
                    </a>
                  </div>
                  <!--标题-->
                  <h3 class="title">
                    <a href="#"> 小米9 6GB+128GB </a>
                  </h3>
                  <p class="desc">骁龙855，索尼4800万超广角微距三摄</p>
                  <p class="price"><span class="num">1549</span>元</p>
                  <div class="flag flag-new">享8折</div>
                </li>
                <li>
                  <!--图像-->
                  <div class="figure">
                    <a href="#">
                      <img src="images/figure8.jpg" />
                    </a>
                  </div>
                  <!--标题-->
                  <h3 class="title">
                    <a href="#"> 小米9 6GB+128GB </a>
                  </h3>
                  <p class="desc">骁龙855，索尼4800万超广角微距三摄</p>
                  <p class="price"><span class="num">549</span>元</p>
                  <div class="flag flag-new">减50元</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--脚部-->
    <div class="footer">
      <div class="container">
        <div class="footer-service">
          <ul class="clearfix">
            <li class="first">
              <a href="#">
                <i class="iconfont">&#xe62d;</i>
                预约维修服务
              </a>
            </li>
            <li>
              <a href="#">
                <i class="iconfont">&#xe642;</i>
                七天无理由退货
              </a>
            </li>
            <li>
              <a href="#">
                <i class="iconfont">&#xe645;</i>
                15天免费换货
              </a>
            </li>
            <li>
              <a href="#">
                <i class="iconfont">&#xe614;</i>
                满150元包邮
              </a>
            </li>
            <li>
              <a href="#">
                <i class="iconfont">&#xe60b;</i>
                520余家售后网点
              </a>
            </li>
          </ul>
        </div>
        <div class="footer-link clearfix">
          <dl class="col-links">
            <dt>帮助中心</dt>
            <dd>账户管理</dd>
            <dd>购物指南</dd>
            <dd>订单操作</dd>
          </dl>
          <dl class="col-links">
            <dt>服务支持</dt>
            <dd>售后政策</dd>
            <dd>自动服务</dd>
            <dd>相关下载</dd>
          </dl>
          <dl class="col-links">
            <dt>线下门店</dt>
            <dd>小米之家</dd>
            <dd>服务网点</dd>
            <dd>授权体验店</dd>
          </dl>
          <dl class="col-links">
            <dt>关于小米</dt>
            <dd>了解小米</dd>
            <dd>加入小米</dd>
            <dd>投资者关系</dd>
          </dl>
          <dl class="col-links">
            <dt>关注我们</dt>
            <dd>新浪微博</dd>
            <dd>官方微信</dd>
            <dd>联系我们</dd>
          </dl>
          <dl class="col-links">
            <dt>特色服务</dt>
            <dd>F码通道</dd>
            <dd>礼物码</dd>
            <dd>防伪查询</dd>
          </dl>
          <div class="col-contact">
            <p class="iphone">400-100-5678</p>
            <p>
              周一至周日 8:00-18:00
              <br />
              （仅收市话费）
            </p>
            <a href="#">
              <i class="iconfont">&#xe66f;</i>
              联系客服
            </a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
